<template>
  <div class="headerContainer">
    <div class="userContainer">
      <span style="font-size: 18px;color:white;line-height: 65px;">用户和权限管理系统</span>
    </div>
    <div class="navTitle">
      <!--联审平台后台数据管理系统-->
      <div class="mndlBox" v-if="showMndl">
        <div class="mndlSty" @click="showEvent" >账户模拟</div>
        <div class="list" v-if="zhmlShow">
          <div class="list_son">
            <div  class="mnTitle" >区域:</div>
            <el-cascader
              :options="unitData"
              v-model="unitIndexData"
              style="width: 70%"
              clearable
              filterable
              @change="handleChange(unitIndexData)">
            </el-cascader>
          </div>
          <div class="list_son">
            <div  class="mnTitle">单位:</div>
            <el-select v-model="unitVal" placeholder="请选择" @change="changeUnit(unitVal)" style="width: 70%"  clearable filterable>
              <el-option
                v-for="item in box2option"
                :key="item.orgid"
                :label="item.orgname"
                :value="item.orgid">
              </el-option>
            </el-select>
          </div>
          <div class="list_son">
            <div class="mnTitle">管理员:</div>
            <el-select v-model="adminVal" placeholder="请选择" @change="mnglyEvent(adminVal)" style="width: 70%" clearable filterable>
              <el-option
                v-for="item in box3option"
                :key="item.orgid + ','+ item.urId"
                :label="item.displayname"
                :value="item.orgid + ','+ item.urId">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="goOut" @click="goOutEvent" v-if="tcdlShow">
        退出模拟登陆
      </div>
      <div class="gcls" @click="outEvent" >前往联审平台</div>
      <div style="float:right;cursor: pointer;position: relative" @click="adminListEvent" >
        <span style="display: inline-block;font-size: 15px;margin-right: 20px;color: red;" v-if="!showMndl && roleNum > 1">您是多个单位管理员，请正确选择所在单位</span>
        <span style="font-size: 15px; margin-right: 20px">组织机构:{{orgname}}</span>
        <div v-if="!showMndl && roleArr.length !== 0" style="position: absolute;top: 0;right: 0px;">
          <i class="el-icon-arrow-down" v-if="!adminListShow"></i>
          <i class="el-icon-arrow-up" v-if="adminListShow"></i>
        </div>
      </div>
      <div class="adminList" v-if="adminListShow && !showMndl && roleArr.length !== 0">
        <ul style="max-height:300px;min-height:60px;overflow-y:auto;">
          <li v-for=" (item) in roleArr" @click="adminQhEvent(item)" style="line-height: 20px;margin-bottom:10px;font-size: 14px">{{item.resultName}}
          </li>
        </ul>
      </div>

    </div>
    <div class="return" @click="onExit">
      <i class="el-icon-back"></i>
      <span>退出</span>
    </div>
  </div>
</template>

<script>
  import {$aos} from "../../store/state";
  import {http} from "../../assets/commonjs/axios";
  import {getPath} from "../../assets/commonjs/env";
  export default {
    name: "HeaderVue",
    data() {
      return {
        tcdlShow:false,
        showMndl:false,
        zhmlShow:false,
        adminListShow:false,
        unitData:[],
        unitIndexData:[],
        unitVal:'',
        box2option:[],
        adminVal:'',
        box3option:[],
        orgname:'',
        roleArr:[],
        roleNum:0,
      }
    },
    created() {
      $aos.getItem('userName').then(res => {
        if (res) {
          $aos.getItem('roleType').then(res=>{
            if(res === 0){
              this.showMndl = true;
            }
          })
          $aos.getItem('loginData').then(res => {
            if(res.inSimulation){
              this.tcdlShow = true;
            }
            let arr1 = res.userRoles || [];
            let arr2 = [];
            let arr3 = [];
            arr1.forEach(item=>{
              if(item.roleType === 5){
                this.roleNum++;
                arr2.push(item)
              }else if(item.roleType === 4){
                arr3.push(item)
              }
            })
            this.roleArr = arr2.concat(arr3)
            this.orgname = res.role.resultName;
            this.OrganizationEvent()
          })
        }
      })
    },
    methods: {
      //模拟登陆选项框
      showEvent(){
        this.zhmlShow = !this.zhmlShow;
      },
      //管理员所在单位的切换
      adminListEvent(){
        this.adminListShow = !this.adminListShow;
      },
      adminQhEvent(item){
        http('post','permission/role_login',{
          urId:item.id
        }).then(res=>{
          if(res.data.success){
            $aos.setItem("roleType", res.data.data.role.roleType);
            $aos.getItem('loginData').then(resr => {
              resr.org = res.data.data.org;
              resr.role = res.data.data.role;
              $aos.setItem("loginData",resr)
              $aos.setItem("sideNum",'0')
            })
            this.$message({message: res.data.msg, type: 'success'});
            window.location.reload();
          }else{
            this.$message({message: res.data.msg, type: 'warning'});

          }
        })

      },


      handleChange(val){
        if(val.length){
          let obj = val[val.length-1]
          this.unitEvent(obj.cityAreaType);
        }
      },

      OrganizationEvent(){//组织机构事件
        http('post','permission/list_org_type',{
          "isCity":"",
          "area":"",
          "type":"",
          "cityAreaType":""
        }).then(res=>{
          let data = res.data.data || [];
          this.unitData = this.getJsonTreetc(data);
        })
      },
      //把得到的数据变成需要的树结构(弹出窗里的没有全部)
      getJsonTreetc(data) {
        if(data.length){
          let itemArr = [];//总的数组，
          let sjObj = {children: [], label: "市级", value: 1};//市级对象，
          let qjObj = {children: [], label: "区级", value: 2};//区级对象，
          let qjData = [];
          let qjAreaSx = [];
          data.forEach(item=>{
            if(item.isCity === 1){
              let newArea = {};
              newArea.value = {};
              newArea.value.isCity = item.isCity;
              newArea.value.type = item.type;
              newArea.value.cityAreaType = item.cityAreaType;
              newArea.label = item.typeName;
              sjObj.children.push(newArea)
            }else if (item.isCity === 2){
              qjData.push(item)
              if(qjAreaSx.indexOf(item.area) === -1){
                qjAreaSx.push(item.area)
              }
            }
          });
          //区级结构遍历生成
          for (let i = 0; i < qjAreaSx.length; i++) {
            let newArea = {};
            newArea.value = {};
            qjData.forEach(item=>{
              if(qjAreaSx[i] == item.area){
                newArea.value.isCity = item.isCity;
                newArea.value.area = item.area;
                newArea.areas = item.area;
                newArea.label = item.areaName;
                newArea.children = [];
              }
            })
            qjObj.children.push(newArea)
          }
          //区级子级遍历生成
          let qjzjData = qjObj.children
          for (let arIndex in qjzjData) {
            let nodeA = qjzjData[arIndex];
            for (let s = 0; s < qjData.length; s++) {
              if (qjData[s].area == nodeA.areas) {
                let nodes = qjData[s];
                let newArea = {};
                newArea.value = {};
                newArea.value.isCity = nodes.isCity;
                newArea.value.area = nodes.area;
                newArea.value.type = nodes.type;
                newArea.value.cityAreaType = nodes.cityAreaType;
                newArea.label = nodes.typeName;
                qjObj.children[arIndex].children.push(newArea)
              }
            }
          }
          itemArr.push(sjObj)
          itemArr.push(qjObj)
          return itemArr;
        }
      },

      //获取单位
      unitEvent(val){
        const params = {
          cityAreaType:val||'',
        }
        http('post','permission/list_org',params).then(res=>{
          if(res.data.success){
            let data = res.data.data || [];
            this.box2option = data;
          }
        })
      },
      //切换单位获得相应字段传到获取管理员接口里
      changeUnit(val){
        this.getadminList(val)
      },
      //获取相应的管理员
      getadminList(val){
        http('post','permission/list_user',{
          orgId:val,
          status:2
        }).then(res=>{
          if(res.data.success){
            let info = res.data.data || [];
            this.box3option = info;
          }
        })
      },

      //管理员模拟登陆
      mnglyEvent(val){
        let obj = val.split(',')
        if(obj){
          this.mndlsjAPI(obj)
        }
      },
      //模拟登陆接口
      mndlsjAPI(obj){
        http('post','permission/simulation_login',{
          orgId:obj[0] || '',
          urId:obj[1] || '',
        }).then(res=>{
          let data = res.data;
          if(data.success){
            this.zhmlShow = !this.zhmlShow
            $aos.setItem("loginData",data.data);
            $aos.setItem("roleType", data.data.role.roleType);
            $aos.setItem("userInfo", data.data.user);
            $aos.setItem("sideNum", '0');
            this.$router.push({path: '/container'});
            window.location.reload();
          }
        })

      },
      goOutEvent(){
        this.$confirm('确定要退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          http('post','permission/simulation_login_out').then(res=>{
            let data = res.data;
            if(data.success){
              this.zhmlShow = !this.zhmlShow
              $aos.setItem("loginData",data.data);
              $aos.setItem("roleType", data.data.role.roleType);
              $aos.setItem("userInfo", data.data.user);
              $aos.setItem("sideNum", '0');
              window.location.reload();
              this.$message({message: res.data.msg, type: 'success'});
            }else{
              this.$message({message: res.data.msg, type: 'warning'});
            }
          })
        })

      },
      outEvent(){
        let url = getPath('zpt_path')
        window.open(url);
      },
      onExit() {
        this.$confirm('确定要退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          http('post', 'permission/login_out ', {}).then(request => {
            if (request.data.success) {
              $aos.clear();
              this.$router.push({path: "/user/login"});
            }
          })

        });
      },
    }
  }
</script>

<style scoped>
  ul li{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .headerContainer {
    color: #fff;
  }
  .userContainer {
    width: 250px;
    height: 65px;
    float: left;
    background: rgb(60,60,79);
    line-height: 40px;
    padding: 0 20px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
  }

  .return{
    float:right;
    width: auto;
    height: 35px;
    border-radius: 2px;
    background: rgb(117,117,132);
    margin:15px 35px;
    padding:6px 10px 6px 3px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .navTitle {
    float: left;
    width: calc(100% - 400px);
    height: 65px;
    line-height: 60px;
    padding: 0 20px;
    font-size: 20px;
    color: #fff;
    box-sizing: border-box;
  }
.mndlBox {
  text-align: center;
  position: relative;
  float: left;
}
.gcls{
  cursor: pointer;
  margin: 10px 0 0 20px ;
  padding: 0 20px;
  height: 45px;
  line-height: 45px;
  /*background: #262636;*/
  background: red;
  text-align: center;
  position: relative;
  float: left;
  font-size: 16px;
  border: 1px solid #000;
  border-radius:2px;
}
  /*.gcls:hover{*/
    /*background: #222;*/
  /*}*/
  .mndlSty{
    cursor: pointer;
    margin: 10px 0 0 20px ;
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
    background: #262636;
    text-align: center;
    position: relative;
    float: left;
    font-size: 16px;
    border: 1px solid #000;
    border-radius:2px;
  }
  .mndlSty:hover{
    background: #222;
  }
.goOut{
  cursor: pointer;
  width:140px;
  height: 45px;
  line-height: 45px;
  margin: 10px 0 0 20px ;
  background: #262636;
  font-size: 16px;
  text-align: center;
  float: left;
  border: 1px solid #000;
  border-radius:2px;
}
  .goOut:hover{
    background: #222;
  }
  .list{
    position: absolute;
    width: 400px;
    background: #333349;
    height: auto;
    z-index: 1000;
    top: 65px;
  }
  .mnTitle{
    width: 60px;
    text-align: center;
    display: inline-block;
    font-size: 14px

  }
  .adminList{
    position: absolute;
    width: 320px;
    background: #333349;
    z-index: 1000;
    top: 65px;
    right: 160px;
  }
  .adminList>ul{
    margin: 0;
    padding: 0 10px 0 26px;
  }
  .adminList>ul>li{
    line-height: 40px;
    font-size: 16px;
    cursor: pointer;
  }

</style>
